<template>
  <div id="app">
    <div class="switchcase-1">
      <button class="hi" @click="handleChangeView(1)">switchcom1</button>
      <button type="waring" @click="handleChangeView(2)">switchcom2</button>
      <button type="danger" @click="handleChangeView(3)">switchcom3</button>

      <component :is="handtap"></component>
    </div>
    <child-1></child-1>
 <child-2></child-2>
  </div>
</template>

<script>
import child1 from "./components/child1.vue";
import child2 from "./components/child2.vue";
import Switchcomp1 from "./components/Switchcomp1.vue";
import Switchcomp2 from "./components/Switchcomp2.vue";
import Switchcomp3 from "./components/Switchcomp3.vue";
export default {
  name: "App",
  components: {
    child1,
    child2,
    Switchcomp1,
    Switchcomp2,
    Switchcomp3,
  },
  data() {
    return {
      handtap: "Switchcomp2",

    };
  },
  methods: {
    handleChangeView(temp) {
      this.handtap = "Switchcomp" + temp;
      console.log(this.handtap);
    },
  },
};
</script>

<style>
.switchcase-1 {
  background-color: green;
  height: 100px;
}
.switchcomponent {
  height: 70px;
}
</style>
